<template>
  <div class="nuxtContent">
    <el-container
      style="height: 100%;z-index:9999"
      v-loading.fullscreen.lock="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-aside class="bgcolor3 w200" width="220px" v-if="!$route.meta.menu">
        <div class="color1 title cur" @click="index()">vinny博客系统</div>
        <el-menu :unique-opened="true" class="menus" @select="select">
          <el-submenu v-for="(item ,index1) in menuArr" :key="index1" :index="''+index1" v-show="item.show===1">
            <template slot="title" >
              <i :class="'iconbg menu_icon mr5 el-icon-menu-'+item.icon"></i>
              {{item.name}}
            </template>
            <el-menu-item-group v-if="item.child">
              <el-menu-item
                v-for="(child,key) in item.child"
                :key="index1+'-'+key"
                :index="''+index1+'-'+key"
                @click="goPush(child)"
              >{{child.name}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container v-if="!$route.meta.heard">
        <el-header class="f20" style="line-height:60px">
          <div class="tl fl wb50" v-if="!$route.meta.search">
            <el-row>
              <el-col :span="24">
                <el-input placeholder="search..." v-model="search" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-col>
            </el-row>
          </div>
          <div class="tr fr wb50" v-if="userinfo">
            <el-dropdown class="ml30">
              <i class="el-icon-user-solid cur">
                <span class="f16">&ensp;{{userinfo.data.name.username}}</span>
              </i>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item>修改密码</el-dropdown-item> -->
                <el-dropdown-item @click.native="dlgType()">修改密码</el-dropdown-item>
                <el-dropdown-item class="tc" @click.native="exit()">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 内容区 -->
        <el-main v-if="menuArr&&$store.state.token" class="bgcolor4 hb100">
          <!-- <transition name="slide-fade"> -->
          <nuxt class="page-component-wrap" />
          <!-- <router-view class="page-component-wrap"></router-view> -->
          <!-- </transition> -->
        </el-main>
        <!-- 内容区 end -->
      </el-container>
      <el-dialog
        title="修改密码"
        width="400px"
        :close-on-click-modal="!1"
        :visible.sync="dlgVisible"
        center
      >
        <!-- 添加修改弹窗 start -->
        <el-form
          ref="addForm"
          :rules="rules"
          :inline="true"
          class="pt25"
          :model="addForm"
          label-width="100px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="旧密码：" prop="oldPassword">
                <el-input
                  placeholder="旧密码 "
                  type="password"
                  autocomplete="off"
                  v-model="addForm.oldPassword"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="新密码：" prop="password">
                <el-input
                  v-model="addForm.password"
                  placeholder="新密码"
                  type="password"
                  autocomplete="off"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkpwd">
                <el-input
                  v-model="addForm.checkpwd"
                  placeholder="确认密码"
                  autocomplete="off"
                  type="password"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="dialog-footer">
            <el-button type="primary" :loading="subLoading==1" @click="dlgSub(1)">确 定</el-button>
            <el-button @click="cancel()">取 消</el-button>
          </el-row>
        </el-form>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
import { rules } from '@/assets/util/rules'
import { znk } from '@/assets/util/public'
export default {
  data() {
    return {
      loading: false,
      userinfo: {
        data: {
          name: {}
        }
      },
      search: '',
      username: '',
      num: 1,
      state: false, // 数据字典状态
      subLoading: false,
      dlgVisible: false,
      dlgClass: '',
      rules: rules,
      addForm: {
        id: null,
        oldPassword: null,
        checkpwd: null,
        password: null
      },
      menuArr: [] // 菜单数据
    }
  },
  beforeRouteLeave(to, from, next) {
    next()
  },
  filters: {},
  created() {
    // this.$Http('GET', '/api/admin/menu',{}).then(function (data) {
    //   // that.$store.commit('LOADING', false)
    //   that.menuArr = data.data
    // })
  },
  methods: {
    init() {
      let that = this
      this.$Http('GET', '/api/admin/menu', {}).then(function (data) {
        // that.$store.commit('LOADING', false)
        that.menuArr = data.data
      })
      // this.menu()
      // this.$store.commit('THAT', this)
    },
    index() {
      this.$router.push({ path: '/index' })
    },
    cancel(form, that) {
      let thats = that || this
      thats.subLoading = false
      thats.dlgVisible = false
      thats.$refs['addForm'].resetFields()
    },
    select() { },
    // 获取菜单栏
    menu() {
      var that = this
      // if (!this.$route.meta.menu) {
      //   this.$Http('GET', '/api/admin/menu').then(function (data) {
      //     // that.$store.commit('LOADING', false)
      //     that.menuArr = data.data
      //   })
      // }
    },
    // 退出
    exit() {
      // let that = this
      // this.$Http('post', '/shiro/auth/logout').then(function (data) {
      //   znk.delCookie('token')
      //   that.$router.push({ path: '/login' })
      // })
    },
    // 页面跳转
    goPush(item) {
      let that = this
      that.$router.push({
        path: item.url
        // query: {t: new Date()}
      })
      // this.dictFun(item.url, function () {

      // })
    },
    dlgType(index) {
      this.dlgVisible = true
    },
    dlgSub(index) {
      let that = this

      that.$refs['addForm'].validate(valid => {
        if (valid) {
          that.subLoading = index
          that.addForm.id = that.userinfo.data.name.id
          that
            .$Http('post', '/admin/user/updatePwd', that.addForm)
            .then(data => {
              if (data.code === 0) {
                that.$message({ message: '修改密码成功!', type: 'success' })
                // that.dlgVisible = false
                that.cancel()
              } else {
                that.$message({ message: data.msg, type: 'error' })
              }
              that.$store.commit('LOADING', false)
              that.subLoading = false
            })
        }
      })
    }
  },
  beforeCreate() {
    if (!this.$route.meta.menu) {
      // this.$store.dispatch('userinfo')
    }
    // this.$store.commit('LOADING', false)
  },

  mounted() {
    let that = this
    that.init()
    if (znk.getCookie('token')) {
      this.$store.commit('TOKEN', znk.getCookie('token'))
    }
    // console.log('vuexadmin----', this.$store)


  },
  computed: {
    // ...mapGetters(['loading', 'dict', 'dictState'])
  },
  watch: {
    $route(to, from) {
      // console.log('to', to, from)
    }
  }
}
</script>
<style>
@import "~/assets/css/animate.css";
@import "~/assets/css/base.css";
@import "~/assets/css/common.css";
.title {
  height: 85px;
  line-height: 85px;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  font-family: -webkit-body, fantasy;
}
.email_info {
  width: 8px;
  height: 8px;
  right: 0px;
  top: 2px;
  right: -2px;
}
.slide-fade-enter-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
/* .slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
} */
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>
